<template>
    <a-layout>
      <a-layout-header :style="headerStyle">
        <img class="headerImg" src="../assets/header.png" alt="header">
      </a-layout-header>
      <a-layout>
        <a-layout-content :style="contentStyle">
          <a-layout style="width: 100%;height: 100%">
            <a-layout-sider
                breakpoint="lg"
                collapsed-width="0"
                @collapse="onCollapse"
                @breakpoint="onBreakpoint"
            >
              <a-tooltip>
                <template #title>前往个人中心</template>
                <div :style="logo" @click="toPersonCenter">
                  <a-space align="center" direction="horizontal" :size="20">
                    <a-avatar :size="50" :src="CURRENT_USER.userAvatar">
                    </a-avatar>
                    <div class="userNameContent">
                      {{CURRENT_USER.userName}}
                    </div>
                  </a-space>
                </div>
              </a-tooltip>
              <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item key="1">
                  <calendar-outlined/>
                  <span class="nav-text">TODO</span>
                </a-menu-item>
                <a-menu-item key="2">
                  <pie-chart-outlined/>
                  <span class="nav-text">习惯</span>
                </a-menu-item>
                <a-menu-item key="3">
                  <aim-outlined/>
                  <span class="nav-text">目标规划</span>
                </a-menu-item>
                <a-menu-item key="4">
                  <deployment-unit-outlined/>
                  <span class="nav-text">智能对话</span>
                </a-menu-item>
                <a-menu-item key="5">
                  <tags-outlined/>
                  <span class="nav-text">其他</span>
                </a-menu-item>
              </a-menu>
            </a-layout-sider>
            <a-layout>
              <a-watermark content="FreeNote">
                <a-layout-content :style="{ margin: '24px 16px 0'}">
                  <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' ,height:'80vh'}">
                    <Todo v-if="selectedKeys[0] == 1"/>
                    <Habit v-else-if="selectedKeys[0]==2"/>
                    <Target v-else-if="selectedKeys[0]==3"/>
                    <ChatYucongming v-else-if="selectedKeys[0]==4"/>
                    <Else v-else/>
                  </div>
                </a-layout-content>
              </a-watermark>
            </a-layout>
          </a-layout>
        </a-layout-content>
        <a-layout-sider :style="siderStyle">
          <OneSentence/>
        </a-layout-sider>
      </a-layout>
      <a-layout-footer style="text-align: center">
        Freenote ©2023 Created by xwhking 2837468248@qq.com
      </a-layout-footer>
    </a-layout>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import {
  AimOutlined,
  CalendarOutlined,
  DeploymentUnitOutlined,
  PieChartOutlined,
  TagsOutlined,
} from '@ant-design/icons-vue';
import Todo from '../components/Todo.vue';
import Habit from '../components/Habit.vue';
import Target from '../components/Target.vue';
import Else from '../components/Else.vue'
import OneSentence from "../components/OneSentence.vue";
import ChatYucongming from "../components/Chat.vue";
import myAxios from "../axios.js";
import {CURRENT_USER} from "../constant/UserContant.js";
import {message} from "ant-design-vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute();
const toPersonCenter = () => {
  router.push('/person')
}
onMounted(() => {
  selectedKeys.value[0] = route.query.tab===undefined?'1':route.query.tab;
  myAxios.get('/user/getCurrentUser').then(
      res => {
        if(res.code === 0){
          CURRENT_USER.value = res.data
          message.success('用户信息获取成功');
        }else if(res.code === 40100){
          message.error('未登录,请先登录');
          router.push('/login');
        }else{
          message.error('系统错误');
        }
      }
  )
})
const selectedKeys = ref(['1']);
const collapsed = ref(false);
const headerStyle = {
  height: '96px',
  width: '100vw',
  padding: 0
};
const siderStyle = {
  textAlign: 'center',
  height: "80vh",
  color: '#1a1a1a',
};
const logo = {
  cursor:'pointer',
  height: '70px',
  margin: '16px',
  textAlign: 'center',
  lineHeight: '70px',
  fontSize: '30px',
  color: 'white'
}
</script>

<style scoped>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout-sub-header-background {
  background: #141414;
}

.headerImg {
  height: 100%;
  width: 100%;
}
.userNameContent {
  font-size: 20px;
}

</style>